<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:t="http://myfaces.apache.org/tomahawk"
                template="templates/mainTemplate.xhtml"
                xmlns:jsflot="http://www.jsflot.org/taglib/jsflot" >
    
    <ui:define name="content">
        <h:form>
            <center>
            <h2 align="center">
                <h:outputText value="#{bundle.headerGraph}"/>
            </h2>
            </center>
        </h:form>
        <h:form>
        <a4j:outputPanel layout="block" style="width:850px; height:650px">
             <jsflot:flotChart id="valueTimeChart"
                value="#{chartBean.chartSeries}"
                actionListener="#{chartBean.chartActionListener}"
                testChartDraggedAction="#{chartBean.chartDraggedListener}"
                chartDraggable="#{chartBean.chartData.chartDraggable}"
                chartClickable="#{chartBean.chartData.chartClickable}"
                chartZoomable="#{chartBean.chartData.chartZoomable}"
                reRender="clickedPanel"
                showLines="#{chartBean.chartData.showLines}"
                fillLines="#{chartBean.chartData.fillLines}"
                showDataPoints="#{chartBean.chartData.showDataPoints}"
                legendColumns="#{chartBean.chartData.legendColumns}"
                legendOpacity="#{chartBean.chartData.legendOpacity}"
                legendPosition="#{chartBean.chartData.legendPosition}"
                legendColor="#{chartBean.chartData.legendColor}"
                height="#{chartBean.chartData.height}"
                width="#{chartBean.chartData.width}"
                showTooltip="#{chartBean.chartData.showTooltip}"
                tooltipPosition="#{chartBean.chartData.tooltipPosition}"
                tooltipFollowMouse="#{chartBean.chartData.tooltipFollowMouse}"
                mode="#{chartBean.chartData.mode}"
                timeFormat="#{chartBean.chartData.timeFormat}"
                title="#{chartBean.chartData.title}"
                subtitle="#{chartBean.chartData.subtitle}"
                chartType="#{chartBean.chartData.chartType}"
                showXaxisLabels="#{chartBean.chartData.showXaxisLabels}"
                xaxisTitle="#{chartBean.chartData.xaxisTitle}"
                xaxisTitleRotation="#{chartBean.chartData.xaxisTitleRotation}"
                xaxisLabelRotation="#{chartBean.chartData.xaxisLabelRotation}"
                showYaxisLabels="#{chartBean.chartData.showYaxisLabels}"
                yaxisTitle="#{chartBean.chartData.yaxisTitle}"
                yaxisTitleRotation="#{chartBean.chartData.yaxisTitleRotation}"
                yaxisLabelRotation="#{chartBean.chartData.yaxisLabelRotation}"
                numberOfXAxisTicks="#{chartBean.chartData.numberOfXAxisTicks}"
                xaxisMinValue="#{chartBean.chartData.xaxisMinValue}"
                xaxisMaxValue="#{chartBean.chartData.xaxisMaxValue}"
                numberOfYAxisTicks="#{chartBean.chartData.numberOfYAxisTicks}"
                yaxisMinValue="#{chartBean.chartData.yaxisMinValue}"
                markers="#{chartBean.chartData.markers}"
                markerPosition="#{chartBean.chartData.markerPosition}"
                yaxisMaxValue="#{chartBean.chartData.yaxisMaxValue}"
                crosshair="#{chartBean.chartData.crosshair}">
            </jsflot:flotChart>
            <script type="text/javascript" src="resources\js\jspdf.js"></script>
            <script type="text/javascript" src="resources\js\base64.js"></script>
            <script type="text/javascript" src="resources\js\sprintf.js"></script>
            
                <script>
                    $(function () {

                        var specialElementHandlers = {
                            '#editor': function (element,renderer) {
                                return true;
                            }
                        };
                     $('#saveChart').click(function () {
                            var doc = new jsPDF();
                            doc.fromHTML($('#body').html(), 15, 15, {
                                'width': 170,'elementHandlers': specialElementHandlers
                            });
                            doc.save('sample-file.pdf');
                    });  
});
                </script>
            <a4j:commandButton styleClass="button" id="saveChart" value="Convert To PDF" />
        </a4j:outputPanel>
        </h:form>
        <h:form>
            <center>
                <a4j:outputPanel layout="block" style="overflow:auto">
                    <rich:dataTable columnsWidth="10em" rowKeyVar="row"
                                                    onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
                                                    onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'" id="uList"
                                                    rows="99" columnClasses="col" value="#{chartBean.username}" var="user">
                        <rich:column style="width:200px">
                            <f:facet name="header">
                                <h:outputText value="#{bundle.users}" style="font-size:10pt"/>
                            </f:facet>
                            <a4j:outputPanel layout="block">
                                <h:outputText value="#{user}" style="font-size:10pt"/>
                            </a4j:outputPanel>
                        </rich:column>
                        
                    </rich:dataTable>
                </a4j:outputPanel>
            </center>
        </h:form>
        <h:form>
            <a4j:commandButton styleClass="button" id="cancelGraphLog"  value="#{bundle.menuBack}" action="showIndex">  
            </a4j:commandButton>
        </h:form>
    </ui:define>
</ui:composition>